<template>
	<view class="content" v-if="height!==0&&showLead" >
		<!-- <view @click="homeJump" class="close pa" :style="{top:top+'px'}">跳过</view>
		<u-swiper  :autoplay="false" @change="changeBanner " @click='clickBanner'  :circular="false"  :list="bannerList" :height="height" mode="round"></u-swiper>
		<view v-if="current==bannerList.length-1" class="pa btn-through">
			<u-button  type="success" shape="circle" :custom-style="customStyle"
				@click="homeJump">立即体验</u-button>
		</view> -->
		 <view @click="homeJump" class="close pa" :style="{top:top+'px'}">跳过</view>
		<uni-swiper-dot :info="bannerList" :current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
			<swiper class="swiper-box" :current="current" @change="changeBanner">
				<swiper-item v-for="(item ,index) in bannerList" :key="index">
					<view :class="item.colorClass" class="swiper-item">
						<image :src="item.url" mode="aspectFill" />
						<view  class="pa btn-through u-text-center">
							<view class="fs46 app-theme fwb">{{current==0?'货比三家':current==1?'拒绝回扣':'天天实价'}}</view>
							<view class="c6 fs30 mt11 mb25">{{current==0?'不吃亏':current==1?'价格透明·公平公正':'今日下单·明日送达'}}</view>
							<u-button v-if="current==bannerList.length-1" type="success" shape="circle" :custom-style="customStyle"
								@click="homeJump">立即体验</u-button>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
	</view>
</template>

<script>
	import {
		bannerCode
	} from '@/api/common.js'
	export default {

		data() {
			return {
				mode: 'dot',
				dotsStyles: {
					width: '10',
					height: '10',
					backgroundColor: 'rgba(72, 161, 71, 0.4)',
					border: '1px rgba(72, 161, 71, 0.4) solid',
					color: '#fff',
					selectedBackgroundColor: '#48A147',
					selectedBorder: '1px #48A147 solid',
					bottom: 30
				},
				customStyle: {
					background: 'linear-gradient(90deg, #48A147 0%, #8AE38A 100%)',
					borderColor: '#33B775',
					height:'68rpx',
					width:'245rpx',
					'font-size':'28rpx'
				},
				bannerList: [],
				height: 0,
				top:0,
				current:0,
				showLead:false
			}
		},
		onLoad() {
			if(!uni.getStorageSync('showLead')){
				this.showLead = true
				uni.setStorageSync('showLead',true)
				this.bannerCode()
			}else{
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		},
		async mounted() {
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					that.height = res.screenHeight /(uni.upx2px(100) / 100)
					that.top = ((res.platform == 'ios' ? 44 : 48) + res.statusBarHeight)
					
				}
			});
		},
		methods: {
			changeBanner(e){
				this.current = e.detail.current
			},
			homeJump(){
				uni.switchTab({
					url:'/pages/index/index'
				})
				this.showLead = false
			},
			clickBanner(e) {
				this.$common.advJump(this.bannerList[e])
			},
			bannerCode() {
				return bannerCode({
					bannerCode: 'wx_b_lead'
				}).then(res => {
					this.bannerList = res.data.map(item =>{
						return{
							url:item.image,
							colorClass: 'uni-bg-white',
						}
					})
					if(!res.data.length){
						uni.switchTab({
							url:'/pages/index/index'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-box {
		height: 100vh;
	}
	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		background: #eee;
		color: #fff;
	}
	
	.swiper-item image {
		width: 100%;
		height: 100%;
	}
.btn-through{
	z-index: 1;
	bottom:calc(100rpx + constant(safe-area-inset-bottom)) !important;
	bottom:calc(100rpx + env(safe-area-inset-bottom)) !important;
}
.close{
	z-index: 1;
	width: 142rpx;
	height: 56rpx;
	line-height: 56rpx;
	border-radius: 28rpx;
	text-align: center;
	background: rgba(0, 0, 0, 0.3);
	color: white;
	right: 30rpx;
	// background: rgba(255, 255, 255, 0.3);
}
</style>